<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
	<el-tree class="filter-tree"
          :data="treeData"
          node-key="code"
          :expand-on-click-node='false' 
          :props="defaultProps"
          ref="cityTree" 
          @node-click="changeClick" default-expand-all 
          :highlight-current="true">
          <span class="build-custom-tree-node" slot-scope="{ node, data }">
          <span :title="node.label" v-if="node.label.length>7">{{ node.label.substring(0,7)+"..." }}</span>
          <span :title="node.label" v-else>{{ node.label }}</span>
          <span
              v-if="!data.childList"
              @click.stop="() => removebuid(node, data)" >
            <icon-svg
              icon-class="shanchu" 
              style="fill:#2683f5" />
          </span>
          </span>
    </el-tree>
</template>
<script>
import {
  fetchTree,
  firstBuild,
} from "@/api/admin/build/index";
	export default{
			data(){
				return{
					treeData:[],
					isnewtree:false,
					curbuildid:"",
					firstSelected:"",
					defaultProps: {
				      children: "childList",
				      label: "name"
				    },
				}
			},
			mounted(){
				this.initLoad();
			},
			methods:{
				initLoad() {
			      this.isnewtree=true
			      fetchTree().then(data => {
			        this.treeData = data.data;
			        if (this.treeData.length!==0) {
			          firstBuild().then(data => {
			            this.curbuildid=data.data.id;
			            this.firstSelected =data.data.id;
			          }).then(()=>{
			              this.isnewtree=false;
			              this.setleafcolor();//设置叶子节点颜色
			          });
			        }else{
			          this.isnewtree=false
			        }
			      }).catch(()=>{
			        this.isnewtree=false;
			      })
			    },
				getRandomColor() {
			      // 随机色生成
			      return (
			        "#" +
			        ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6)
			      );
			    },
				setleafcolor(){
			      let self = this;
			      this.$nextTick(function() {
			          self.$refs.cityTree.setCurrentKey(self.firstSelected);
			          let classlist = document.querySelectorAll(
			            ".el-icon-caret-right.is-leaf"
			          );
			          classlist.forEach(item => {
			            item.style.color = self.getRandomColor();
			            item.classList.add("dot-circl");
			          });
			      });
			    },
			    changeClick(data,node) {
			        this.curbuildid=data.code;
			        this.$emit("changeClick",this.curbuildid)
			    }
			}
	}
</script>
